<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
    <ui:define name="head">        
        <script type="text/javascript">
            //<![CDATA[
                function handleShare(evt, data) {
                    $('#photos').append('<img src="#{request.contextPath}/photocam/' + data + '" />');
                }
            //]]> 
        </script>
    </ui:define>

	<ui:define name="content">
        
        <h1 class="title ui-widget-header ui-corner-all">PrimePush - PhotoShare</h1>
		<div class="entry">
			<p>Share your photos with Prime Push PhotoShare Sample.</p>
            
            <h:form>
                
                <p:photoCam widgetVar="pc" listener="#{photoShare.share}"/>
                    
                <p:commandButton type="button" value="Share" onclick="pc.capture()"/>
                
            </h:form>
            
            <div id="photos">
                
            </div>
            
            <p:push onmessage="handleShare" channel="photoshare" />

        </div>

	</ui:define>
</ui:composition>